<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<title>드래그 중 좌표를 제어</title>
<meta name="class-lists" content="jindo.DragArea"/>
<meta name="screenshots" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="드래그중에 좌표를 계산하여 상하좌우 20px씩 움직이도록 한 예제입니다.">
<link rel="stylesheet" type="text/css" href="../asset/demo.css">
<style type="text/css">
	body,input,textarea,button{ padding:10px;font-size:12px;line-height:1.5em;font-family:"돋움",Dotum,Helvetica,AppleGothic,Sans-serif;color:#383d41;}
	div { border:1px solid #000; }
	
	.draggable { position:absolute; background-color:#fff; cursor:move; }
	#foo { width:300px; padding:10px; left:10px; top:10px; }
</style>
</head>
<body>
<script type="text/javascript" src="../asset/demojs/demo.js#header"
     data-title="Jindo Component"
     data-subtitle="=document.title"
     data-backbutton="false"
     data-viewsource="false"
     data-qrcode="true"></script>
	
<div class="draggable" id="foo">
	<p style="height:200px;overflow:auto;">
		다시 네게로 갈수 없어<br>

		니가 올것만 같아서<br>
		떠난 그길에 멈춰서있어<br>
		다른 사랑도 할수 없어<br>
		아픈 이별이 커져서<br>
		더는 내 몸이 견디지 못해<br>
		터질지도 몰라<br><br>

		
		언제나 You're my Hero<br>
		그래 난 너뿐이야<br>
		너 없는 감옥에서<br>
		하루도 살아갈수 없어<br>
		어두운 밤 저 하늘로 꿈처럼 날아가<br>
		너를 찾아서 안기고 싶어<br><br>

		
		다시 흐르는 눈물마저<br>
		나쁜 버릇이 되어서<br>
		이젠 더 이상 가둘수없어<br>
		머릿속엔 니가 있어<br>
		가슴속에도 있어서<br>
		어떤 누구도 담을수 없어<br>

		미칠지도 몰라<br><br>
		
		언제나 You're my Hero<br>
		그래 난 너뿐이야<br>
		너없는 감옥에서<br>
		하루도 살아갈수 없어<br>
		어두운 밤 저 하늘로 꿈처럼 날아가<br>

		너를 찾아서 안기고싶어<br><br>
		
		보고싶다고 울고있다고<br>
		너를 잊는건 못한다고<br>
		사랑한다고내게 오라고 나를위해 기도해<br><br>
		
		가다만 발거음도 타다만 사진도<br>
		더이상 쓸모없는 추억도 버릴수가 없어<br>

		어두운밤 저 하늘로 꿈처럼 날아가<br>
		너를 찾아서 안기고 싶어<br><br>
		
		언제나 You're my Hero<br>
		그래 난 너뿐이야<br>
		너없는 감옥에서 하루도 살아갈수 없어<br>
		어두운밤 저 하늘로 꿈처럼 날아가<br>

		너를 찾아서 안기고싶어<br><br>
	</p>
</div>

<script type="text/javascript" charset="utf-8" src="../../asset/jindo.desktop.all.ns.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Component.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.UIComponent.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.DragArea.js"></script>
<script type="text/javascript">
	var oDragArea = new jindo.DragArea(jindo.$('foo'), {
		sClassName : 'draggable',
		bFlowOut : true
	}).attach({
		'beforeDrag' : function(oCustomEvent) {
			//oCustomEvent.nX = null; // 가로로는 안 움직이게
			oCustomEvent.nX = Math.round(oCustomEvent.nX / 20) * 20;
			oCustomEvent.nY = Math.round(oCustomEvent.nY / 20) * 20;
		}
	});
</script>
<script type="text/javascript" src="../asset/demojs/demo.js#footer"></script>
</body>
</html>